/*
 * @Author: liuxinye
 * @Date: 2022-01-17 18:18:03
 * @LastEditors: liuxinye
 * @LastEditTime: 2022-08-08 16:57:25
 * @Description: 文字几何体
 */
<script setup lang="ts">
import { ref, reactive, render, onMounted } from "vue";
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  Color,
  Fog,
  DirectionalLight,
  PlaneGeometry,
  MeshBasicMaterial,
  Mesh,
  Group,
  Vector3,
MeshPhongMaterial,
Object3D,
} from "three";
import { Font, FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
import Stats from "three/examples/jsm/libs/stats.module";
onMounted(() => {
  let text = "lxy",
    bevelEnabled = true,
    font: Font | undefined = undefined,
    fontName = "helvetiker", // helvetiker, optimer, gentilis, droid sans, droid serif
    fontWeight = "bold"; // normal bold
  let cameraTarget: number | Vector3 ;
  let group: Group, textMesh1, textMesh2, textGeo, materials: any;
  const height = 20,
    size = 90,
    hover = 30,
    curveSegments = 4,
    bevelThickness = 2,
    bevelSize = 1.5;
  const mirror = true;
  //创建场景
  const scene = new Scene();
  scene.background = new Color(0x000000);
  scene.fog = new Fog(0x000000, 250, 1400);
  //创建相机(透视相机)
  let camera = new PerspectiveCamera(
    50,
    window.innerWidth / window.innerHeight,
    1,
    1500
  );
  camera.position.set(0, 400, 700);
  cameraTarget = new Vector3(0, 150, 0 );

  materials = [
		new MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
		new MeshPhongMaterial( { color: 0xffffff } ) // side
	]; 

  group = new Group();
  group.position.y = 100;
  scene.add(group);
  //光照
  //方向光
  const dirLight = new DirectionalLight(0xff00ff, 1);
  dirLight.position.set( 0, 0, 1 ).normalize();
  dirLight.target=group as Object3D;
  scene.add(dirLight);
  //点光源
  const pointLight = new DirectionalLight(0xffffff, 1.5);
  pointLight.position.set(0, 300, 500);
  scene.add(pointLight);

  loadFont();
  //舞台
  const plane = new Mesh(
    new PlaneGeometry(10000, 10000),
    new MeshBasicMaterial({
      color: 0xff0,
      opacity: 0.5,
      transparent: true,
    })
  );
  plane.position.y = 100;
  plane.rotation.x = -Math.PI / 2;
  scene.add(plane);

  const stats:Stats = Stats();
  //创建渲染器
  const renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  (document.getElementById('canvas') as HTMLElement).appendChild(renderer.domElement);
  //创建蓝线
  // scene.add(line)
  //动画渲染
  function animate() {
    requestAnimationFrame(animate);
    render();
    // stats.update();
  }
  let targetRotation = 0;
  function render() {
    // group.rotation.y += 0.1* 0.05;
    // group.rotation.x += 0.1* 0.05;
    camera.lookAt(cameraTarget);
    renderer.clear();
    group.rotateY(1*Math.PI/180)
    renderer.render(scene, camera);
  }
  function loadFont() {
    const loader = new FontLoader();
    loader.load(
      "fonts/" + fontName + "_" + fontWeight + ".typeface.json",
      function (response) {
        font = response;

        createText();
      }
    );
  }
  function createText() {
    textGeo = new TextGeometry(text, {
      font: font,

      size: size,
      height: height,
      curveSegments: curveSegments,

      bevelThickness: bevelThickness,
      bevelSize: bevelSize,
      bevelEnabled: bevelEnabled,
    });
    textGeo.computeBoundingBox();

    const centerOffset =
      -0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);

    textMesh1 = new Mesh(textGeo, materials);

    textMesh1.position.x = centerOffset;
    textMesh1.position.y = hover;
    textMesh1.position.z = 0;

    textMesh1.rotation.x = 0;
    textMesh1.rotation.y = Math.PI * 2;

    group.add(textMesh1);

    if (mirror) {
      textMesh2 = new Mesh(textGeo, materials);

      textMesh2.position.x = centerOffset;
      textMesh2.position.y = -hover;
      textMesh2.position.z = height;

      textMesh2.rotation.x = Math.PI;
      textMesh2.rotation.y = Math.PI * 2;

      group.add(textMesh2);
    }
  }

  animate();
});
</script>
<template>
  <div id="canvas"></div>
</template>
<style lang="scss" scoped>
</style>
